<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1,user-scalable=no,width=device-width">
<title>jQuery垂直缩略图相册插件 支持鼠标滑动翻页DEMO演示</title>
<link rel='stylesheet' href='css/masterslider.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/ms-showcase2.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/masterslider.main.css' type='text/css' media='all' />
<script src="js/modernizr-2.6.2.min.js"></script>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/masterslider.min.js'></script>
<script type='text/javascript' src='js/jquery.easing.min.js'></script>
<script>
var ms_grabbing_curosr='images/grabbing.cur',ms_grab_curosr='images/grab.cur';
window.$ = jQuery.noConflict();
</script>
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="css/vc-ie8.css" media="screen"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen"/><![endif]-->
</head>
<body style="background-color:#333;">
<script type="text/javascript">		
	$(document).ready(function(){
		var slider = new MasterSlider();
		slider.setup('masterslider' , {
			width:610,
			height:630,
			space:5,
			view:'basic'
		});
		slider.control('arrows');	
		slider.control('scrollbar' , {dir:'h'});	
		slider.control('thumblist' , {autohide:false ,dir:'v',arrows:false});
	});
</script>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div style="max-width:800px;margin:10px auto;">
<div class="ms-showcase2-template ms-dir-v"> 
  <!-- masterslider -->
  <div class="master-slider ms-skin-default" id="masterslider">
    <div class="ms-slide"> <img src="masterslider/loading-2.gif" data-src="images/big/1.jpg" alt="lorem ipsum dolor sit"/> <img class="ms-thumb" src="images/1.jpg" alt="thumb" /> </div>
    <div class="ms-slide"> <img src="masterslider/loading-2.gif" data-src="images/big/2.jpg" alt="lorem ipsum dolor sit"/> <img class="ms-thumb" src="images/2.jpg" alt="thumb" /> </div>
    <div class="ms-slide"> <img src="masterslider/loading-2.gif" data-src="images/big/3.jpg" alt="lorem ipsum dolor sit"/> <img class="ms-thumb" src="images/3.jpg" alt="thumb" /> </div>
    <div class="ms-slide"> <img src="masterslider/loading-2.gif" data-src="images/big/4.jpg" alt="lorem ipsum dolor sit"/> <img class="ms-thumb" src="images/4.jpg" alt="thumb" /> </div>
    <div class="ms-slide"> <img src="masterslider/loading-2.gif" data-src="images/big/5.jpg" alt="lorem ipsum dolor sit"/> <img class="ms-thumb" src="images/5.jpg" alt="thumb" /> </div>
    <div class="ms-slide"> <img src="masterslider/loading-2.gif" data-src="images/big/6.jpg" alt="lorem ipsum dolor sit"/> <img class="ms-thumb" src="images/6.jpg" alt="thumb" /> </div>
    <div class="ms-slide"> <img src="masterslider/loading-2.gif" data-src="images/big/7.jpg" alt="lorem ipsum dolor sit"/> <img class="ms-thumb" src="images/7.jpg" alt="thumb" /> </div>
  </div>
  <!-- end of masterslider --> 
</div>
</div>

<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90-2.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>